<template>
  <!-- 站点详细统计列表 -->
  <div>
    <v-page-search>
      <el-form :inline="true"
               :model="searchForm"
               solt="search-from">
        <el-form-item>
          <el-input v-model="searchForm.area"
                    placeholder="行政区划"
                    style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.cbmu"
                     multiple
                     collapse-tags
                     @change="getData"
                     style="width: 120px"
                     placeholder="维护单位">
            <el-option v-for="item in options.cbmu"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.territory"
                     multiple
                     @change="getData"
                     collapse-tags
                     style="width: 170px"
                     placeholder="责任区域">
            <el-option v-for="item in options.territory"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="search-but">
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="getData">搜索</el-button>
        <el-button size="small"
                   type="info"
                   icon="el-icon-delete"
                   @click="clearCondition">清除</el-button>
        <el-button size="small"
                   type="warning"
                   icon="el-icon-document"
                   v-loading="exprotLoading"
                   @click="exprotInfo">导出</el-button>
      </div>
    </v-page-search>
    <el-tabs v-model="activeName"
             @tab-click="handleClick"
             type="card">
      <el-tab-pane label="责任区域统计"
                   name="territory">
        <statis-territory :search-form="searchForm"
                          ref="territory"></statis-territory>
      </el-tab-pane>
      <el-tab-pane label="省份统计"
                   name="area">
        <statis-area :search-form="searchForm"
                     ref="area"></statis-area>
      </el-tab-pane>
      <el-tab-pane label="上报单位统计"
                   name="unit">
        <statis-unit :search-form="searchForm"
                     ref="unit"></statis-unit>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import StatisUnit from './statis/statis-unit'
import StatisTerritory from './statis/statis-territory'
import StatisArea from './statis/statis-area'
import { exportStatis } from '@/api/site'
import _ from 'lodash'

export default {
  data() {
    return {
      loading: false,
      exprotLoading: false,
      activeName: 'territory',
      // 筛选条件
      searchForm: {
        area: '',
        cbmu: '',
        territory: []
      },
      // 选项
      options: {
        // 责任区域
        territory: [],
        cbmu: [
          {
            label: '',
            value: null
          },
          {
            label: '我司',
            value: '我司'
          },
          {
            label: '非我司',
            value: '非我司'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'appEnum',
      'userInfo'
    ])
  },
  mounted() {
    this.initEnum()
  },
  methods: {
    getData() {
      if (this.activeName === 'unit') {
        this.$refs.unit.search()
      } else if (this.activeName === 'territory') {
        this.$refs.territory.search()
      } else {
        this.$refs.area.search()
      }
    },
    // 清除筛选条件
    clearCondition() {
      this.searchForm.area = ''
      this.searchForm.cbmu = ''
      this.searchForm.territory = []
      this.getData()
    },
    // 初始化下拉菜单
    initEnum() {
      this.options.territory = this.appEnum.territory
      setTimeout(() => {
        if (this.userInfo.department.indexOf('服务') !== -1) this.searchForm.territory.push(this.userInfo.department)
        this.getData()
      }, 1000)
    },
    // 切换操作
    handleClick(tag) {
      this.activeName = tag.name
      this.getData()
    },
    // 导出信息
    exprotInfo() {
      this.exprotLoading = true
      const params = _.assignIn({}, this.searchForm, {
        type: this.activeName
      })
      // 多选条件处理
      params.territory = params.territory.join(',')

      exportStatis(params).then(res => {
        if (res.data.success) {
          window.open('http://' + res.data.data)
        }
      })

      this.exprotLoading = false
    }
  },
  components: {
    StatisUnit,
    StatisTerritory,
    StatisArea
  }
}
</script>
